<template>
    <div class="message-item" :class="{ 'user-message': isUser, 'ai-message': !isUser }">
        <div class="avatar" :class="avatar"></div>
        <div class="message-content">
            <div class="message-text">
                {{ content }}
                <!-- <MarkPreview :content="content" /> -->
            </div>
            <div v-if="!isUser" class="message-actions">
                <!-- <button>
                    <Volume2 class="icon" />
                </button>
                <button>
                    <ThumbsUp class="icon" />
                </button>
                <button>
                    <ThumbsDown class="icon" />
                </button> -->
                <button @click="copyToClipboard(isUser, content)">
                    <Check v-if="isCopy" class="icon" />
                    <Copy v-else class="icon" />
                </button>
                <!-- <button>
                    <Share class="icon" />
                </button> -->
            </div>
            <div v-if="isUser" class="message-actions">
                <!-- <button>
                    <Volume2 class="icon" />
                </button>
                <button>
                    <ThumbsUp class="icon" />
                </button>
                <button>
                    <ThumbsDown class="icon" />
                </button> -->
                <button @click="copyToClipboard(isUser, content)">
                    <Check v-if="isCopy" class="icon" />
                    <Copy v-else class="icon" />
                </button>
                <!-- <button>
                    <Share class="icon" />
                </button> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { Volume2, ThumbsUp, ThumbsDown, Copy, Share, Check } from 'lucide-vue-next';
import { ElMessage } from 'element-plus';
import MarkPreview from '../utils/MarkPreview.vue';
import { ref,inject } from 'vue';

defineProps({
    isUser: Boolean,
    content: String,
    avatar: String
});
let text = inject('text');

let isCopy = ref(false);

const copyToClipboard = (isUser, content) => {
    navigator.clipboard.writeText(content);
    if(isUser){
        text.value = text.value + '\n ## ' + content;
    }else{
        text.value = text.value + '\n' + content;
    }
    
    // console.log(text.value)
    // ElMessage.success('复制成功');
    // ElMessage.success('复制成功');
    isCopy.value = !isCopy.value;
    setTimeout(() => {
        isCopy.value = !isCopy.value;
    }, 2000);
}
</script>

<style lang="scss" scoped>
.message-item {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-start;

    &.user-message {
        flex-direction: row-reverse;

        .message-content {
            margin-right: 12px;
            margin-left: 0;
        }

        .message-text {
            background-color: #4185F4;
            color: #fff;
            border-radius: 18px 18px 0 18px;
        }
    }

    &.ai-message .message-text {
        background-color: #fff;
        color: #333;
        border-radius: 18px 18px 18px 0;
    }
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;

    &.user-avatar {
        background-color: #4185F4;
    }

    &.kimi-avatar {
        background-color: #FF9800;
    }
}

.message-content {
    max-width: 70%;
    margin-left: 12px;
}

.message-text {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-actions {
    display: flex;
    margin-top: 8px;
    justify-content: flex-start;

    button {
        background: none;
        border: none;
        padding: 4px;
        margin-right: 8px;
        cursor: pointer;
        color: #666;

        &:hover {
            color: #4185F4;
        }

        .icon {
            width: 16px;
            height: 16px;
        }
    }
}
</style>